<template>
  <div class="host">
    <!--  <div class="date-head">
      <el-radio-group v-model="searchType" size="mini" @change="changeTime">
        <el-radio-button label="1">近一日</el-radio-button>
        <el-radio-button label="2">近一周</el-radio-button>
        <el-radio-button label="3">近一月</el-radio-button>
        <el-radio-button label="4">自定义</el-radio-button>
      </el-radio-group>
      <el-date-picker
        v-if="searchType == '4'"
        v-model="pickTime"
        type="daterange"
        size="small"
        clearable
        value-format="yyyy-MM-dd"
        placeholder="选择日期"
        @change="changeTime"
      />
    </div> -->
    <div class="data-list flex">
      <div class="box1 bg-white">
        <div class="title">CPU负载</div>
        <line-echart ref="cpuLineRef" height="340px" :cdata="cpuData" />
      </div>
      <div class="box1 bg-white marg-lr-20">
        <div class="title">内存负载</div>
        <line-echart height="340px" :cdata="memoryData" />
      </div>
      <div class="box1 bg-white">
        <div class="title">磁盘利用率</div>
        <pie-echart height="340px" :cdata="diskOutput"></pie-echart>
      </div>
    </div>
    <div class="data-list flex" v-show="businessStatus.length > 0">
      <div class="box bg-transparent" style="padding: 20px 0 0">
        <div class="title">业务组件状态概览</div>
        <div class="content flex">
          <div v-for="(item, index) in businessStatus" :key="index" class="content-list content-list-4 bg-white">
            <div class="content-list-title flex">
              <img :src="item.icon || require('@/assets/images/systemHome/hxywjk-01@2x.png')" alt="" />
              {{ item.name }}
            </div>
            <div class="status">
              <span
                    :class="['radius-icon', item.status == 'alive' ? 'success-icon' : 'error-icon']"
                    style="margin-right: 10px"
                    ><i
                  /></span>
              <span style="font-size: 14px;text-align:left;flex:1;">{{ item.status == 'alive' ? '正常' : '异常' }}</span>
              <span class="font-grey" @click="handleGetListData(item, index)">详情</span>
            </div>
          </div>
          <span class="placeholder-tag"></span>
          <span class="placeholder-tag"></span>
          <span class="placeholder-tag"></span>
        </div>
      </div>
    </div>
    <div class="data-list flex" v-show="businessCoreData.length > 0">
      <div class="box bg-transparent" style="padding: 20px 0 0">
        <div class="title">核心业务监控</div>
        <div class="content flex">
          <div
            v-for="(item, index) in businessCoreData"
            :key="index"
            class="content-list content-list-5 bg-white"
            style="width: calc(20% - 20px) !important">
            <div class="content-list-title flex">
              <img :src="item.icon || require('@/assets/images/systemHome/hxywjk-01@2x.png')" alt="" />
              <div>
                <span style="margin-bottom: 10px; display: inline-block">{{ item.name }}</span>
                <div>
                  <span
                    :class="['radius-icon', item.status == 'healthy' ? 'success-icon' : 'error-icon']"
                    style="margin-right: 10px"
                    ><i
                  /></span>
                  <span style="font-size: 14px">{{ item.status == 'healthy' ? '正常' : '异常' }}</span>
                </div>
              </div>
            </div>
          </div>
          <span class="placeholder-tag"></span>
          <span class="placeholder-tag"></span>
          <span class="placeholder-tag"></span>
        </div>
      </div>
    </div>
    <!-- 资产告警配置 -->
    <div class="data-list" style="padding: 20px 0">
      <div class="title">资产告警配置</div>
      <div class="flex flex-box">
        <div class="box bg-white">
          <div class="title">告警阈值</div>
          <div class="content">
            <div class="content-item flex flex-jusity" v-for="(item, index) in warnningData" :key="index">
              <img class="warnning-img" :src="require('@/assets/images/systemHome/' + item.img)" alt="" />
              <div class="flex" style="flex:1">
                <span style="margin:0 10px; font-size: 14px">{{ item.title }}</span>
                <el-slider style="margin-right: 10px" v-model="item.value"></el-slider>
              </div>
              <div class="flex flex-jusity">
                <span style="font-size: 14px">设置告警阈值</span>
                <el-input-number
                  v-model="item.value"
                  style="width: 80px; margin: 0 10px"
                  :min="1"
                  :max="100"
                  @blur="item.value=Math.round(item.value)"
                  label="描述文字"></el-input-number>
                <!-- <el-input type="number" style="width:80px;margin:0 10px;" v-model="item.value" placeholder="请输入内容" @change="setWarnningData"></el-input> -->
                <el-button type="primary" @click="handleUpdateThreshold(item, index)">确定</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="box bg-white marg-l-20">
          <div class="title">告警频率</div>
          <div class="content">
            <div class="flex">
              <div style="margin-right: 5px">资产超限告警频率间隔</div>
              <el-input-number v-model="rate" controls-position="right" :min="30" :max="1440" @blur="rate=Math.round(rate)"></el-input-number
              ><span style="margin-left: 5px">分钟</span>
              <el-tooltip content="资源超限告警间隔时间最小为30分钟" placement="top" effect="light">
                <i class="el-icon-question el-icon"></i>
              </el-tooltip>

              <el-button type="primary" @click="handleUpdateRate()">确定</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <home-details ref="homeDetailsRef" :id="currentId"></home-details>
  </div>
</template>

<script>
import taskStatusEchart from './components/taskStatusEchart'
import pieEchart from './components/pieEchart'
import lineEchart from './components/lineEchart.vue'
import homeDetails from './components/homeDetails.vue'
import HkTable from '@/components/HKTable/index'
import {
  getUsageData,
  getBusService,
  getComponentService,
  getListData,
  getThresholdData,
  updateThreshold,
  updateRate,
} from '@/api/system/home.js'

export default {
  components: { taskStatusEchart, HkTable, pieEchart, lineEchart, homeDetails },
  data() {
    return {
      per: 10,
      searchType: '1',
      pickTime: undefined,
      starTime: '',
      endTime: '',
      loading: false,
      // 业务核心监控
      businessCoreData: [],
      // 业务组件状态
      businessStatus: [],
      //  磁盘利用率
      diskOutput: {
        title: '磁盘利用率',
        legendShow: true,
        idle: 0,
        usage: 0,
      },
      //   CPU负载
      cpuData: {
        color: '#4B6EEF',
        legendName: ['cpu负载'],
        xAxis: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],
        value: [0,0, 0, 0, 0, 0, 0],
      },
      //  内存负载
      memoryData: {
        color: '#3ABF81',
        legendName: ['内存负载'],
        xAxis: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],
        value:[0,0, 0, 0, 0, 0, 0],
      },
      //  告警阈值
      warnningData: [
        {
          type: 'disk',
          title: '硬件使用率',
          img: 'gjfz-01@2x.png',
          value: 0,
        },
        {
          type: 'mem',
          title: '内存使用率',
          img: 'gjfz-02@2x.png',
          value: 0,
        },
        {
          type: 'cpu',
          title: 'CPU使用率',
          img: 'gjfz-03@2x.png',
          value: 0,
        },
      ],
      //
      rate: '',
      currentId: '',
    }
  },
  mounted() {
    // 获取图表的数据
    this.handleGetUsageData()
    this.handleGetBusService()
    this.handleGetComponentService()
    this.handleGetThresholdData()
  },
  methods: {
    /** 获取cpu负载折线图数据 */
    handleGetUsageData() {
      getUsageData().then((res) => {
        this.cpuData.xAxis = res.cpu.xaxis
        this.cpuData.value = res.cpu.value
        this.memoryData.xAxis = res.mem.xaxis
        this.memoryData.value = res.mem.value
        this.diskOutput.idle = res.disk.idle
        this.diskOutput.usage = res.disk.usage
      })
    },

    /** 获取核心业务存活情况 */
    handleGetBusService() {
      getBusService().then((res) => {
        this.businessCoreData = res
      })
    },
    /** 获取业务组件状态  */
    handleGetComponentService() {
      getComponentService().then((res) => {
        this.businessStatus = res
      })
    },
    /** 获取阈值配置值 */
    handleGetThresholdData() {
      getThresholdData().then((res) => {
        this.warnningData.forEach((i) => {
          i.value = Number(res[i.type])
        })
        this.rate = res.rate
      })
    },
    /** 更新阈值配置值 */
    handleUpdateThreshold(item, index) {
      updateThreshold({ type: item.type, value: item.value }).then((res) => {
        this.$message.success('保存成功')
        this.handleGetThresholdData()
      })
    },
    /** 更新告警频率 */
    handleUpdateRate() {
      // this.rate=Math.round(this.rate)
      updateRate({ value: this.rate}).then((res) => {
        this.$message.success('保存成功')
        this.handleGetThresholdData()
      })
    },
    /**  监控详情  */
    handleGetListData(item, index) {
      this.$refs.homeDetailsRef.showDialog(item)
    },
    /** 改变时间  */
    changeTime() {
      if (this.pickTime) {
        this.startTime = this.pickTime[0]
        this.endTime = this.pickTime[1]
      } else {
        this.startTime = ''
        this.endTime = ''
      }
    },
    /**  点击-业务组件状态概览详情 */
    handleDetail(index) {
      this.currentId = '001'
    },
    /** 輸入告警閾值 */
    setWarnningData(e) {},
  },
}
</script>

<style lang="scss" scoped>
.host{
  width: 100%;
  height: 100%;
}
.dark-theme {
  .host {
    background: transparent !important;
    
  }
  .host .bg-white {
    color: #fff;
    border: 1px solid rgba(59, 139, 255, 0.4);
    background-color: rgba(59, 139, 255, 0.1);
  }
  .host .box .content .content-list .status {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  .host .el-icon {
    color: rgba(255, 255, 255, 1);
  }
}
.placeholder-tag {
  width: calc(20% - 20px);
}
::v-deep .el-slider {
  // width: 200px;
  flex:1;
}

::v-deep .el-input-number {
  width: 120px !important;
}

::v-deep .el-progress-bar {
  width: 97%;
}

.font-grey {
  color: #999;
  cursor: pointer;
}
.flex-jusity {
  justify-content: space-between;
  align-items: center;
}

.host {
  // padding: 20px;
  background: #f3f5fb;
  width: 100%;
  overflow-y: auto;
  overflow-x:hidden;

  .date-head {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .el-radio-group {
      margin-right: 20px;
    }
  }

  .marg-l-20 {
    margin-left: 20px;
  }
  .marg-lr-20 {
    margin: 0 20px;
  }

  .data-list {
    width: 100%;
    //flex-wrap:wrap;
    align-items: stretch;
    justify-content: space-between;
  }

  .icon-img {
    width: 70px;
    height: 70px;
  }

  .font-size-30 {
    font-size: 30px;
  }

  .font-size-14 {
    font-size: 14px;
  }

  .font-pointer {
    cursor: pointer;
  }

  .font-blue {
    color: #4b6eef;
  }

  .font-orange {
    color: #fa8c16;
  }

  .font-red {
    color: #ff3535;
  }

  .font-green {
    color: #3abf81;
  }

  .font-lighBlue {
    color: #66bcf1;
  }

  .targetTable {
    height: 400px;
  }

  .radius-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    text-align: center;
    line-height: 12px;
    border-radius: 50%;

    i {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    &.success-icon {
      background: #afe6cd;

      i {
        background: #38c082;
      }
    }

    &.error-icon {
      background: #fcdfda;

      i {
        background: #f15a42;
      }
    }
  }

  .bg-white {
    background: white;
  }

  .bg-transparent {
    background: transparent;
  }
.box1{
  display: flex;
    padding: 20px;
    flex-direction: column;
    font-size: 14px;
    width:32.5%;
}
  .box {
    flex: 1;
    display: flex;
    padding: 20px;
    flex-direction: column;
    font-size: 14px;

    .column {
      padding: 10px;
    }

    .content {
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: stretch;
      .content-list {
        width: calc(25% - 20px);
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        .content-list-title {
          font-size: 16px;
          padding: 20px;
          flex: 1;

          img {
            width: 48px;
            margin-right: 20px;
          }
        }

        .status {
          border-top: 1px solid rgba(0, 0, 0, 0.08);
          padding: 20px;
          display: flex;
          justify-content: space-between;
        }
        &.content-list-5 {
          &:nth-of-type(n + 6) {
            margin-top: 20px;
          }
        }
        &.content-list-4 {
          &:nth-of-type(n + 5) {
            margin-top: 20px;
          }
        }
        justify-content: space-between;

        .totalnum {
          cursor: pointer;
          font-size: 24px;
          color: #4b6eef;
        }
      }

      .content-item {
        margin-bottom: 20px;

        &.content-item:nth-last-of-type(1) {
          margin-bottom: 0px;
        }
      }

      .warnning-img {
        width: 40px;
      }
    }
  }

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
  }
  .flex-box {
    align-items: stretch;
    justify-content: space-between;
  }

  .el-icon {
    margin: 10px;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.45);
  }
}
</style>
